<template>
	<view>
	<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false"><block slot="content">用户信息</block></cu-custom> -->
		<!--:style="[{ top: CustomBar + 'px' }]"-->
		<cmd-page-body type="top" >
			  <cmd-transition name="fade-up" v-if="hasLogin">
			  <view>
			    <cmd-cel-item title="头像" slot-right arrow>
			      <cmd-avatar src="https://avatar.bbs.miui.com/images/noavatar_small.gif"></cmd-avatar>
			    </cmd-cel-item>
			    <cmd-cel-item title="工号" :addon="user.workno" arrow></cmd-cel-item>
			    <cmd-cel-item title="姓名" :addon="user.name" arrow></cmd-cel-item>
			    <cmd-cel-item title="联系方式" :addon="user.phone" arrow></cmd-cel-item>
			    <button class="btn-logout" @tap="bindLogout">退出登录</button>
			  </view>
			</cmd-transition>
				  <cmd-transition name="fade-up" v-else>
			  <view>
			    <button class="btn-logout"  @tap="bindLogin">点击登陆</button>
			  </view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
import cmdCelItem from '@/components/cmd-cell-item/cmd-cell-item.vue';
import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';
import { mapState, mapMutations } from 'vuex';

export default {
	components: {
		cmdNavBar,
		cmdPageBody,
		cmdTransition,
		cmdCelItem,
		cmdAvatar
	},
	computed: mapState(['forcedLogin', 'hasLogin', 'user']),

	data() {
		return {
			CustomBar: this.CustomBar
		};
	},

	mounted() {},

	methods: {
		...mapMutations(['logout']),
		/**
		 * 点击触发
		 * @param {Object} type 跳转页面名或者类型方式
		 */
		fnClick(type) {
			if (type == 'modify') {
				uni.navigateTo({
					url: '/pages/user/modify/modify'
				});
			}
		},	bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			/**
			 * 如果需要强制登录跳转回登录页面
			 */
			if (this.forcedLogin) {
				uni.reLaunch({
					url: '../login/login'
				});
			}
		}
	}
};
</script>

<style>
.btn-logout {
	margin-top: 100upx;
	width: 80%;
	border-radius: 50upx;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(to right, #365fff, #36bbff);
}

.btn-logout-hover {
	background: linear-gradient(to right, #365fdd, #36bbfa);
}
</style>
